<generic>
	<template>
		<Style>
		
				
		</Style>
		<!-- Container -->
		<VBox width="100%" height="100%" backgroundColor="#669966" paddingTop="0" paddingBottom="0" spacing="0" verticalGap="1">

			<!-- Header -->
			<?php include_once("../template/login-header.mxml") ?>

			<!-- Content -->
			<HBox backgroundColor="white" width="100%" height="80%" horizontalGap="0" verticalAlign="middle" horizontaAlign="right">

				<!-- Logo -->
				<VBox backgroundColor="white" width="60%" height="100%" verticalGap="1" horizontalAlign="center"
					verticalAlign="middle" > 

					<!-- Faces -->
					<Canvas height="75%" width="75%">
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face1.jpg" x="130" y="0"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face2.jpg" x="90" y="80"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face6.jpg" x="160" y="80"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face4.jpg" x="160" y="170"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face5.jpg" x="90" y="170"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face7.jpg" x="130" y="260"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face8.jpg" x="220" y="140"/>
					<Image completeEffect="Fade" includeInLayout="true" source="frontend/images/face3.jpg" x="30" y="140"/>
					<Label text="Find your friends here ..." y="340" x="240" fontSize="16" fontWeight="bold" color="#660000"/>
					<Label text="Share your photos..." y="320" x="230" fontSize="16" fontWeight="bold" color="#660000"/>
					<Label text="Chat free ..." y="300" x="210" fontSize="16" fontWeight="bold"  color="#660000"/>
					</Canvas>


				</VBox>	

				<!-- Sign Up -->
				<VBox backgroundColor="white" width="40%" height="100%" 
						verticalAlign="middle" horizontalAlign="center" > 
					<HBox verticalAlign="middle">

						<!-- Labels -->
						<VBox fontSize="13" color="#660000"
						horizontalAlign="right" verticalAlign="midfadle" verticalGap="10" fontFamily="verdana">
						
							<Label color="#660000" fontSize="13" 
								  text="First name:"/>
							<Label color="#660000" fontSize="13" 
								 text="Last name:"/>							
							<Label color="#660000" fontSize="13" 
								 text="Uni E-mail:"/>							
							<Label color="#660000" fontSize="13" 
								text="Password:"/>
							<Label color="#660000" fontSize="13" 
								 text="Confirm Password:"/>
							<Label color="#660000" fontSize="13" 
								 text="Sex:"/>
							<Label color="#660000" fontSize="13"
								 text="Uni position:"/>
							<Label color="#660000" fontSize="13" 
								text="Birthday:"/>
								
						</VBox>

						<!-- Text inputs -->
						<VBox width="160" verticalGap="10" verticalAlign="middle">
							<TextInput/>
							<TextInput/>
							<TextInput/>
							<TextInput displayAsPassword="true"/>
							<TextInput displayAsPassword="true"/>
							<ComboBox width="100%" dataProvider="[ 'male',  'female' ]" />
							<ComboBox width="100%" dataProvider="[ 'student',  'associate professor', 									'professor', 'personal' ]" />
							<DateField width="100%" id='DateField1' yearNavigationEnabled="true"/>
						</VBox>

						
					</HBox>

						<!-- Sign Up Button-->
						<HBox id="form1" paddingLeft="150" width="100%" horizontalAlign="center">
							<Button fontSize="13" label="Sign up" width="50%" click="dispatchEvent(form1,'home')"/>	
						</HBox>
				</VBox>
			</HBox>
			
			<!--Footer -->
			<?php include_once("../template/login-footer.mxml"); ?>
		</VBox>
	</template>
</generic>
